<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕课网</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/style2.css">
    <link rel="stylesheet" href="./css/style3.css">
    <link rel="stylesheet" href="./css/style4.css">
    <link rel="stylesheet" href="./css/style5.css">
    <link rel="stylesheet" href="./css/style6.css">
    <link rel="stylesheet" href="./css/style7.css">
</head>

<body>
    <div class="top">
        <!-- logo模块 -->
        <div class="mooc"><img src="images/mooc.png" alt=""></div>
        <!-- 导航栏模块 -->
        <div class="nav">
            <ul>
                <li class="li">
                    <select class="select">
                        <option>课程</option>
                    </select>
                </li>
                <li class="li"><a href="#" class="nava">学校</a></li>
                <li class="li"><a href="#" class="nava">学校云</a></li>
                <li class="li"><a href="#" class="nava">慕课堂</a></li>
                <li class="li"><a href="#" class="nava">下载APP</a></li>

            </ul>
        </div>
        <!-- search模块 -->
        <div class="search">
            <input type="text" value="搜索感兴趣的课程">
            <button>
                <img src="images/search.png" alt="">
            </button>
        </div>
        <!-- 登录模块 -->
        <div class="login"><a href="#">登录|注册</a></div>

    </div>
    <div class="middle">
        <div class="content">
            <!-- 第一模块开始 -->
            <div class="one">
                <div class="country">
                    <ul><a href="#" class="good">国家精品</a>

                        <li class="li2">
                            <ul class="subject">
                                <li class="li2"><a href="#" class="computer">计算机</a></li>
                                <li class="li2"><a href="#" class="digital">大数据与人工智能/……</a></li>
                            </ul>
                        </li>
                        <li class="li2">
                            <ul class="subject">
                                <li class="li2"><a href="#" class="computer">计算机</a></li>
                                <li class="li2"><a href="#" class="digital">大数据与人工智能/……</a></li>
                            </ul>
                        </li>
                        <li class="li2">
                            <ul class="subject">
                                <li class="li2"><a href="#" class="computer">计算机</a></li>
                                <li class="li2"><a href="#" class="digital">大数据与人工智能/……</a></li>
                            </ul>
                        </li>
                        <li class="li2">
                            <ul class="subject">
                                <li class="li2"><a href="#" class="computer">计算机</a></li>
                                <li class="li2"><a href="#" class="digital">大数据与人工智能/……</a></li>
                            </ul>
                        </li>
                        <li class="li2">
                            <ul class="subject">
                                <li class="li2"><a href="#" class="computer">计算机</a></li>
                                <li class="li2"><a href="#" class="digital">大数据与人工智能/……</a></li>
                            </ul>
                        <li class="li2">
                            <ul class="subject">
                                <li class="li2"><a href="#" class="computer">计算机</a></li>
                                <li class="li2"><a href="#" class="digital">大数据与人工智能/……</a></li>
                            </ul>
                        </li>
                        <li class="li2">
                            <ul class="subject">
                                <li class="li2"><a href="#" class="computer">计算机</a></li>
                                <li class="li2"><a href="#" class="digital">大数据与人工智能/……</a></li>
                            </ul>
                        </li>
                        <li class="li2">
                            <ul class="subject">
                                <li class="li2"><a href="#" class="computer">计算机</a></li>
                                <li class="li2"><a href="#" class="digital">大数据与人工智能/……</a></li>
                            </ul>
                        </li>
                        <li class="li2">
                            <select class="more">
                                <option>更多</option>
                            </select>
                        </li>
                    </ul>
                </div>
                <div class="test">
                    <img src="images/test.png" alt="">
                    <!-- 左侧按钮箭头 -->
                    <a href="#" class="prev">&lt;</a>
                    <!-- 右侧按钮箭头 -->
                    <a href="#" class="next">&gt;</a>
                    <!-- 底侧 -->
                    <div class="test-nav">
                        <span></span>
                        <span class="selected"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                    </ul>
                </div>
                <div class="user">
                    <div class="usero">免费学习来自名校名师的精品课程</div>
                    <div class="usert"><img src="images/user.png" alt=""></div>
                    <div class="usertr">
                        <div class="mask"></div><a href="#">登录/注册</a>
                    </div>
                    <div class="userf">网易和高等教育出版社出品</div>
                </div>
            </div>
            <!-- 第一模块结束 -->

            <!-- 学校模块开始 -->
            <div class="school">
                <div class="all">
                    <a href="#">
                        <span class="allo">全部801所合作高校</span>
                        <span class="allt">&gt</span>
                    </a>
                </div>

                <div class="beijing"><a href="#"><img src="images/beijing.png" alt=""></a></div>
                <div class="beijing"><a href="#"><img src="images/zhejiang.png" alt=""></a></div>
                <div class="beijing"><a href="#"><img src="images/nanjing.png" alt=""></a></div>
                <div class="beijing"><a href="#"><img src="images/wuhan.png" alt=""></a></div>
                <div class="beijing"><a href="#"><img src="images/haer.png" alt=""></a></div>
            </div>
            <!-- 学校模块结束 -->

            <!-- 直播模块开始 -->
            <div class="live">
                <span class="recent">最近直播</span>
                <span class="recentt"><a href="#">全部</a></span>
                <span class="recentt"><a href="#">2024考研</a></span>
                <span class="recentt"><a href="#">大学应试英语</a></span>
                <span class="recentt"><a href="#">理学工学农学</a></span>
                <span class="recentt"><a href="#">外语</a></span>
                <span class="recentt"><a href="#">考研</a></span>
                <span class="recentt"><a href="#">计算机</a></span>
                <span class="recentt"><a href="#">专升本</a></span>
            </div>
            <!-- T模块开始 -->
            <div class="t">
                <a href="#" class="t-a">
                    <div class="tsmall">

                        <div class="tsmall-top">未开始</div>
                        <div class="tsmall-img"> <img src="images/shuimu.jpg" alt=""></div>
                        <div class="tsmall-font">
                            <p class="tfone">一节课高效备考四级攻略</p>
                            <p class="tftwo"><span>水木观畴</span><span>04月12日</span><span>18点</span></p>
                        </div>

                    </div>
                </a>

                <a href="#" class="t-a">
                    <div class="tsmall">
                        <div class="tsmall-top">未开始</div>
                        <div class="tsmall-img"> <img src="images/shuimu.jpg" alt=""></div>
                        <div class="tsmall-font">
                            <p class="tfone">一节课高效备考四级攻略</p>
                            <p class="tftwo"><span>水木观畴</span><span>04月12日</span><span>18点</span></p>
                        </div>
                    </div>
                </a>
                <a href="#" class="t-a">
                    <div class="tsmall">
                        <div class="tsmall-top">未开始</div>
                        <div class="tsmall-img"> <img src="images/shuimu.jpg" alt=""></div>
                        <div class="tsmall-font">
                            <p class="tfone">一节课高效备考四级攻略</p>
                            <p class="tftwo"><span>水木观畴</span><span>04月12日</span><span>18点</span></p>
                        </div>
                    </div>
                </a>
                <a href="#" class="t-a">
                    <a href="#" class="t-a">
                        <div class="tsmall">
                            <div class="tsmall-top">未开始</div>
                            <div class="tsmall-img"> <img src="images/shuimu.jpg" alt=""></div>
                            <div class="tsmall-font">
                                <p class="tfone">一节课高效备考四级攻略</p>
                                <p class="tftwo"><span>水木观畴</span><span>04月12日</span><span>18点</span></p>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="t-a">

                        <div class="tsmall">
                            <div class="tsmall-top">未开始</div>
                            <div class="tsmall-img"> <img src="images/shuimu.jpg" alt=""></div>
                            <div class="tsmall-font">
                                <p class="tfone">一节课高效备考四级攻略</p>
                                <p class="tftwo"><span>水木观畴</span><span>04月12日</span><span>18点</span></p>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="t-a">
                        <div class="tsmall">
                            <div class="tsmall-top">未开始</div>
                            <div class="tsmall-img"> <img src="images/shuimu.jpg" alt=""></div>
                            <div class="tsmall-font">
                                <p class="tfone">一节课高效备考四级攻略</p>
                                <p class="tftwo"><span>水木观畴</span><span>04月12日</span><span>18点</span></p>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="t-a">
                        <div class="tsmall">
                            <div class="tsmall-top">未开始</div>
                            <div class="tsmall-img"> <img src="images/shuimu.jpg" alt=""></div>
                            <div class="tsmall-font">
                                <p class="tfone">一节课高效备考四级攻略</p>
                                <p class="tftwo"><span>水木观畴</span><span>04月12日</span><span>18点</span></p>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="t-a">
                        <div class="tsmall">
                            <div class="tsmall-top">未开始</div>
                            <div class="tsmall-img"> <img src="images/shuimu.jpg" alt=""></div>
                            <div class="tsmall-font">
                                <p class="tfone">一节课高效备考四级攻略</p>
                                <p class="tftwo"><span>水木观畴</span><span>04月12日</span><span>18点</span></p>
                            </div>
                        </div>
                    </a>
            </div>
            <!-- T模块结束 -->

            <!-- 编辑模块开始 -->
            <p class="h1">编辑推荐</p>
            <div class="editor">
                <ul class="editor-content">
                    <a href="#" class="editor-a">
                        <li class="editor-li">
                            <img src="images/editor.png" alt="">
                            <div class="editor-top">
                                <h3>理论力学</h3>
                                <p>北京师范大学</p>
                            </div>

                            <div class="editor-middle">1094人参加</div>
                            <div class="editor-banner">为你搭建后续理论物理课程的基础、桥梁和纽带！</div>
                        </li>
                    </a>
                    <a href="#" class="editor-a">
                        <li class="editor-li">
                            <img src="images/editor.png" alt="">
                            <div class="editor-top">
                                <h3>理论力学</h3>
                                <p>北京师范大学</p>
                            </div>

                            <div class="editor-middle">1094人参加</div>
                            <div class="editor-banner">为你搭建后续理论物理课程的基础、桥梁和纽带！</div>
                        </li>
                    </a>
                    <a href="#" class="editor-a">
                        <li class="editor-li">
                            <img src="images/editor.png" alt="">
                            <div class="editor-top">
                                <h3>理论力学</h3>
                                <p>北京师范大学</p>
                            </div>

                            <div class="editor-middle">1094人参加</div>
                            <div class="editor-banner">为你搭建后续理论物理课程的基础、桥梁和纽带！</div>
                        </li>
                    </a>
                    <a href="#" class="editor-a">
                        <li class="editor-li">
                            <img src="images/editor.png" alt="">
                            <div class="editor-top">
                                <h3>理论力学</h3>
                                <p>北京师范大学</p>
                            </div>

                            <div class="editor-middle">1094人参加</div>
                            <div class="editor-banner">为你搭建后续理论物理课程的基础、桥梁和纽带！</div>
                        </li>
                    </a>
                    <a href="#" class="editor-a">
                        <li class="editor-li">
                            <img src="images/editor.png" alt="">
                            <div class="editor-top">
                                <h3>理论力学</h3>
                                <p>北京师范大学</p>
                            </div>

                            <div class="editor-middle">1094人参加</div>
                            <div class="editor-banner">为你搭建后续理论物理课程的基础、桥梁和纽带！</div>
                        </li>
                    </a>
                    <a href="#" class="editor-a">
                        <li class="editor-triangle">
                            <img src="images/triangle.png" alt="">

                        </li>
                    </a>

                </ul>
            </div>
            <!-- 编辑模块结束 -->
            <!-- 课程模块开始 -->
            <div class="course">
                <a href="#">
                    <div class="course-content"><img src="images/course.png" alt=""></div>
                </a>
                <a href="#">
                    <div class="course-content"><img src="images/course.png" alt=""></div>
                </a>
                <a href="#">
                    <div class="course-content"><img src="images/course.png" alt=""></div>
                </a>
                <a href="#">
                    <div class="course-triangle">
                        <img src="images/triangle.png" alt="">

                    </div>
                </a>
            </div>
            <!-- 课程模块结束 -->

            <!-- 排行模块开始 -->
            <p class="h1">本周课程排行</p>
            <div class="order">
                <div class="order-content">
                    <a href="#" class="order-next">&gt;</a>
                    <div class="order-content-top">
                        <span class="order-span3">热门排行</span>
                        <span class=" order-span1"> TOP50</span>
                        <span class="order-span2">POPULAR courseS</span>
                    </div>
                    <div class="order-content-bottom"><a href="#">
                            <div class="python">
                                <span class="red">1</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="orange">2</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="yellow">3</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="grey">4</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="grey">5</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                        </a>
                    </div>




                </div>
                <div class="order-content">
                    <a href="#" class="order-next">&gt;</a>
                    <div class="order-content-top">
                        <span class="order-span3">热门排行</span>
                        <span class=" order-span1"> TOP50</span>
                        <span class="order-span2">POPULAR courseS</span>
                    </div>
                    <div class="order-content-bottom"><a href="#">
                            <div class="python">
                                <span class="red">1</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="orange">2</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="yellow">3</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="grey">4</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="grey">5</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="order-content">
                    <a href="#" class="order-next">&gt;</a>
                    <div class="order-content-top">
                        <span class="order-span3">热门排行</span>
                        <span class=" order-span1"> TOP50</span>
                        <span class="order-span2">POPULAR courseS</span>
                    </div>
                    <div class="order-content-bottom"><a href="#">
                            <div class="python">
                                <span class="red">1</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="orange">2</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="yellow">3</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="grey">4</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                            <div class="python">
                                <span class="grey">5</span>
                                <div class="python-img"><img src="images/python.png" alt=""></div>
                                <div class="python-font">
                                    <p class="python-one">Python语言程序设计</p>
                                    <p class="python-two">北京理工大学</p>
                                    <p class="python-three">114148人参加</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 侧边栏开始 -->
            <div class="right">
                <div class="first"><a href="#" class="a"><img src="images/monkey.png" alt=""></a></div>
                <div class="second"> <a href="https://tongdao.youdao.com/index.html" class="a">同道计划</a></div>
                <div class="third">
                    <div class="feedback">
                        <div class="feedbacksmall">
                            <a href="#"><img src="images/feedback.png" alt="" class="images">反馈</a>
                        </div>
                    </div>
                    <div class="download">
                        <div class="downloadsmall">
                            <a href="#"><img src="images/download.png" alt="" class="images">下载</a>
                        </div>
                    </div>
                    <div class="back">
                        <div class="backsmall">
                            <a href="#"><img src="images/back.png" alt="" class="images">返回</a>
                        </div>
                    </div>

                </div>

            </div>
            <!-- 精彩评价开始 -->
            <p class="h1">精彩评价</p>
            <div class="comment">
                <a href="#">
                    <div class="comment-content">
                        <em>
                            <img src="images/cat.jpg" alt="">
                        </em>
                        <div class="comment-content-top">元贞25</div>
                        <p class="comment-p">1、老师的课程，超出了我的学习预期，原因是此课程很有学习和指导作用，理由如下：
                            ①有很强的理论基础性，对没有管理学和组织行为学基础的学员有很好的……
                        </p>
                        <div class="comment-bottom">来自《组织行为学》</div>
                    </div>
                </a>
                <a href="#">
                    <div class="comment-content">
                        <em>
                            <img src="images/cat.jpg" alt="">
                        </em>
                        <div class="comment-content-top">元贞25</div>
                        <p class="comment-p">1、老师的课程，超出了我的学习预期，原因是此课程很有学习和指导作用，理由如下：
                            ①有很强的理论基础性，对没有管理学和组织行为学基础的学员有很好的……
                        </p>
                        <div class="comment-bottom">来自《组织行为学》</div>
                    </div>
                </a>
                <a href="#">
                    <div class="comment-content">
                        <em>
                            <img src="images/cat.jpg" alt="">
                        </em>
                        <div class="comment-content-top">元贞25</div>
                        <p class="comment-p">1、老师的课程，超出了我的学习预期，原因是此课程很有学习和指导作用，理由如下：
                            ①有很强的理论基础性，对没有管理学和组织行为学基础的学员有很好的……
                        </p>
                        <div class="comment-bottom">来自《组织行为学》</div>
                    </div>
                </a>
                <a href="#">
                    <div class="comment-content">
                        <em>
                            <img src="images/cat.jpg" alt="">
                        </em>
                        <div class="comment-content-top">元贞25</div>
                        <p class="comment-p">1、老师的课程，超出了我的学习预期，原因是此课程很有学习和指导作用，理由如下：
                            ①有很强的理论基础性，对没有管理学和组织行为学基础的学员有很好的……
                        </p>
                        <div class="comment-bottom">来自《组织行为学》</div>
                    </div>
                </a>
                <a href="#" class="editor-a">
                    <li class="editor-triangle">
                        <img src="images/triangle.png" alt="">

                    </li>
                </a>
            </div>
            <!-- 精彩评价结束 -->

            <!-- 精品课开始 -->
            <div class="classic">
                <div class="classic-title">
                    <a href="#">
                        <span class="classic-title-main">国家精品课</span>
                        <span class="classic-title-minor">最新好课推荐</span>
                    </a>
                </div>
                <div class="classic-course">
                    <a href="#">
                        <div class="classic-course-content">

                            <div class="classic-course-content-image"><img src="images/class.png" alt=""></div>
                            <div class="classic-course-content-body">
                                <div class="classic-course-content-title">功能汉语速成</div>
                                <div class="classic-course-content-school">北京语言大学</div>
                                <div class="classic-course-content-teacher">徐玉溪</div>
                            </div>
                            <div class="classic-course-content-foot">
                                <span class="classic-course-content-time">
                                    <img src="images/time.png" alt=""> 进行至第四周
                                </span>
                                <span class="classic-course-content-number">512人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="classic-course-content">

                            <div class="classic-course-content-image"><img src="images/class.png" alt=""></div>
                            <div class="classic-course-content-body">
                                <div class="classic-course-content-title">功能汉语速成</div>
                                <div class="classic-course-content-school">北京语言大学</div>
                                <div class="classic-course-content-teacher">徐玉溪</div>
                            </div>
                            <div class="classic-course-content-foot">
                                <span class="classic-course-content-time">
                                    <img src="images/time.png" alt=""> 进行至第四周
                                </span>
                                <span class="classic-course-content-number">512人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="classic-course-content">

                            <div class="classic-course-content-image"><img src="images/class.png" alt=""></div>
                            <div class="classic-course-content-body">
                                <div class="classic-course-content-title">功能汉语速成</div>
                                <div class="classic-course-content-school">北京语言大学</div>
                                <div class="classic-course-content-teacher">徐玉溪</div>
                            </div>
                            <div class="classic-course-content-foot">
                                <span class="classic-course-content-time">
                                    <img src="images/time.png" alt=""> 进行至第四周
                                </span>
                                <span class="classic-course-content-number">512人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="classic-course-content">

                            <div class="classic-course-content-image"><img src="images/class.png" alt=""></div>
                            <div class="classic-course-content-body">
                                <div class="classic-course-content-title">功能汉语速成</div>
                                <div class="classic-course-content-school">北京语言大学</div>
                                <div class="classic-course-content-teacher">徐玉溪</div>
                            </div>
                            <div class="classic-course-content-foot">
                                <span class="classic-course-content-time">
                                    <img src="images/time.png" alt=""> 进行至第四周
                                </span>
                                <span class="classic-course-content-number">512人参加</span>
                            </div>
                        </div>
                        <a href="#">
                            <div class="classic-course-content">

                                <div class="classic-course-content-image"><img src="images/class.png" alt=""></div>
                                <div class="classic-course-content-body">
                                    <div class="classic-course-content-title">功能汉语速成</div>
                                    <div class="classic-course-content-school">北京语言大学</div>
                                    <div class="classic-course-content-teacher">徐玉溪</div>
                                </div>
                                <div class="classic-course-content-foot">
                                    <span class="classic-course-content-time">
                                        <img src="images/time.png" alt=""> 进行至第四周
                                    </span>
                                    <span class="classic-course-content-number">512人参加</span>
                                </div>
                            </div>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#">
                                <div class="classic-course-content">

                                    <div class="classic-course-content-image"><img src="images/class.png" alt="">
                                    </div>
                                    <div class="classic-course-content-body">
                                        <div class="classic-course-content-title">功能汉语速成</div>
                                        <div class="classic-course-content-school">北京语言大学</div>
                                        <div class="classic-course-content-teacher">徐玉溪</div>
                                    </div>
                                    <div class="classic-course-content-foot">
                                        <span class="classic-course-content-time">
                                            <img src="images/time.png" alt=""> 进行至第四周
                                        </span>
                                        <span class="classic-course-content-number">512人参加</span>
                                    </div>
                                </div>
                            </a>
                        </a>
                    </a>
                </div>
                <!-- 精品课结束 -->
            </div>

            <!-- 精品课模块结束 -->

            <!-- 计算机模块开始 -->
            <div class="counter">
                <div class="counter-title">
                    <a href="#">
                        <span class="counter-title-main">计算机</span>
                        <span class="counter-title-minor">最新好课推荐</span>
                        <span class="counter-title-minor">计算机基础</span>
                        <span class="counter-title-minor">程序设计</span>
                        <span class="counter-title-minor">考试/考研</span>
                        <span class="counter-title-minor"></span>
                        <div class="counter-title-study">
                            <div class="counter-title-study-title">大家都在学：</div>
                            <a href="#">
                                <button class="counter-title-button"> <a href="#">大数据与人工智能</a></button>
                                <button class="counter-title-button"> <a href="#">计算机基础与应用</a></button>
                            </a>
                        </div>
                    </a>
                </div>
                <div class="counter-course">
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="counter-course-content">

                            <div class="counter-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="counter-course-content-body">
                                <div class="counter-course-content-title">WEB前端开发</div>
                                <div class="counter-course-content-school">北京林业大学</div>
                                <div class="counter-course-content-teacher">孙桥</div>
                            </div>
                            <div class="counter-course-content-foot">
                                <span class="counter-course-content-time">
                                    ￥999
                                </span>
                                <span class="counter-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>

                </div>
            </div>
            <!-- 计算机模块结束 -->

            <!-- 外语模块开始 -->
            <div class="foreign">
                <div class="foreign-title">
                    <a href="#">
                        <span class="foreign-title-main">外语</span>
                        <span class="foreign-title-minor">最新好课推荐</span>
                        <span class="foreign-title-minor">听说读写</span>
                        <span class="foreign-title-minor">考试/培训</span>
                        <span class="foreign-title-minor"></span>
                        <div class="foreign-title-study">
                            <div class="foreign-title-study-title">大家都在学：</div>
                            <a href="#">
                                <button class="foreign-title-button"> <a href="#">大学英语</a></button>

                            </a>
                        </div>
                    </a>
                </div>
                <div class="foreign-course">
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/counter.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>
                    <a href="#">
                        <div class="foreign-course-content">

                            <div class="foreign-course-content-image"><img src="images/foreign.png" alt=""></div>
                            <div class="foreign-course-content-body">
                                <div class="foreign-course-content-title">WEB前端开发</div>
                                <div class="foreign-course-content-school">北京林业大学</div>
                                <div class="foreign-course-content-teacher">孙桥</div>
                            </div>
                            <div class="foreign-course-content-foot">
                                <span class="foreign-course-content-time">
                                    免费
                                </span>
                                <span class="foreign-course-content-number">12人参加</span>
                            </div>
                        </div>
                    </a>

                </div>
            </div>
            <!-- 外语模块结束 -->

            <!-- 课程模块二开始 -->
            <div class="course-two">
                <a href="#">
                    <div class="course-two-content"><img src="images/course-two.png" alt=""></div>
                </a>
                <a href="#">
                    <div class="course-two-content"><img src="images/course-two.png" alt=""></div>
                </a>
                <a href="#">
                    <div class="course-two-content"><img src="images/course-two.png" alt=""></div>
                </a>
                <a href="#">
                    <div class="course-two-triangle">
                        <img src="images/triangle.png" alt="">

                    </div>
                </a>
            </div>
            <!-- 课程模块二结束 -->
            <!-- 热门模块开始 -->
            <p class="h1">热门分类</p>
            <div class="hot-content">
                <a href="#"><button class="hot-content-button">国家精品</button></a>
                <a href="#"><button class="hot-content-button">期末突击</button></a>
                <a href="#"><button class="hot-content-button">大学英式英语</button></a>
                <a href="#"><button class="hot-content-button">力学工学农学</button></a>
                <a href="#"><button class="hot-content-button">四六级</button></a>
                <a href="#"><button class="hot-content-button">外语</button></a>
                <a href="#"><button class="hot-content-button">经济管理</button></a>
                <a href="#"><button class="hot-content-button">考研</button></a>
                <a href="#"><button class="hot-content-button">考研冲刺</button></a>
                <a href="#"><button class="hot-content-button-special">职场提升</button></a>
                <a href="#"><button class="hot-content-button">计算机</button></a>
                <a href="#"><button class="hot-content-button">有声课堂</button></a>
                <a href="#"><button class="hot-content-button">求职就业</button></a>
                <a href="#"><button class="hot-content-button">音乐与艺术</button></a>
            </div>
            <!-- 热门模块结束 -->

            <!-- 故事模块开始 -->
            <p class="h1">用户故事</p>
            <div class="story-content">
                <button class="story-content-transform">换一换<img src="images/transform.png" alt=""></button>
                <div class="story-content-left-main">
                    <div class="story-content-left-minor">
                        <div class="story-content-left-minor-img">
                            <img src="images/story.png" alt="">
                        </div>
                        <div class="story-content-left-minor-text">
                            <span class="story-content-left-minor-name">周韵</span>
                            <span class="story-content-left-minor-college">中南财经政法大学</span>
                            <div class="story-content-left-minor-review">
                                中国大学MOOC帮助我在专业上更进一步：《公司金融》，《财务管理》，《会计学》，《大学英语口语》，
                                《大学英语写作》，我刷了一遍又一遍。很显然，卿不负我如来亦此，我等来了命运对我的眷顾，
                                成为浙大一名准博士生。
                            </div>
                        </div>
                    </div>
                    <div class="story-content-left-minor">
                        <div class="story-content-left-minor-img">
                            <img src="images/story.png" alt="">

                        </div>
                        <div class="story-content-left-minor-text">
                            <span class="story-content-left-minor-name">周韵</span>
                            <span class="story-content-left-minor-college">中南财经政法大学</span>
                            <div class="story-content-left-minor-review">
                                中国大学MOOC帮助我在专业上更进一步：《公司金融》，《财务管理》，《会计学》，《大学英语口语》，
                                《大学英语写作》，我刷了一遍又一遍。很显然，卿不负我如来亦此，我等来了命运对我的眷顾，
                                成为浙大一名准博士生。
                            </div>
                        </div>
                    </div>
                </div>
                <div class="story-content-right-main">
                    <div class="story-content-right-minor">
                        <div class="story-content-right-minor-img">
                            <img src="images/story.png" alt="">
                            <p class="story-content-right-minor-name">周韵</p>
                            <p class="story-content-right-minor-college">中南财经政法大学</p>
                        </div>
                        <div class="story-content-right-minor-text">

                            <div class="story-content-right-minor-review">
                                中国大学MOOC帮助我在专业上更进一步：《公司金融》，《财务管理》，《会计学》，《大学英语口语》，
                                《大学英语写作》，我刷了一遍又一遍。很显然，卿不负我如来亦此，我等来了命运对我的眷顾，
                                成为浙大一名准博士生。
                            </div>
                        </div>
                    </div>
                    <div class="story-content-right-minor">
                        <div class="story-content-right-minor-img">
                            <img src="images/story.png" alt="">
                            <p class="story-content-right-minor-name">周韵</p>
                            <p class="story-content-right-minor-college">中南财经政法大学</p>
                        </div>
                        <div class="story-content-right-minor-text">

                            <div class="story-content-right-minor-review">
                                中国大学MOOC帮助我在专业上更进一步：《公司金融》，《财务管理》，《会计学》，《大学英语口语》，
                                《大学英语写作》，我刷了一遍又一遍。很显然，卿不负我如来亦此，我等来了命运对我的眷顾，
                                成为浙大一名准博士生。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 故事模块结束 -->
            <!-- 视频模块开始 -->
            <div class="video-content">
                <div class="video-content-mask"></div>
                <div class="video-content-mask-hidden"></div>
                <div class="video-content-mask-play">
                    <img src="images/play.png" alt="">
                    好的大学，没有围墙
                </div>
                <img src="images/video.png" alt="">
            </div>
            <!-- 视频模块结束 -->
            <!-- 结尾模块开始 -->
            <div class="end-content">
                <p>让每一个有意愿提升自己的人，都可以获得更优质的教育</p>
                <img src="images/end.png" alt="">
                <button class="end-content-button">开启学习之旅

                </button>

            </div>
            <!-- 结尾模块结束 -->
        </div>
    </div>
    <div class="banner">
        <div class="banner-content">
            <div class="banner-content-left">
                <img src="images/mooc-banner.png" alt="">
                <p class="banner-content-left-word">由高教社联手网易推出，让每一个有提升愿望的用户能够学到中国知名高校的课程，并获得认证。</p>
            </div>
            <div class="banner-content-right">
                <div class="banner-content-right-about">
                    <div class="banner-content-right-about-top">
                        <p>关于我们</p>
                    </div>
                    <div class="banner-content-right-about-bottom">
                        <div class="banner-content-right-about-left">
                            <a href="#">关于我们</a><br>
                            <a href="#">联系我们</a><br>
                            <a href="#">学校云</a><br>
                        </div>
                        <div class="banner-content-right-about-right">

                            <a href="#">意见反馈</a>
                            <a href="#">常见问题</a>
                            <a href="#">法律条款</a>
                        </div>
                    </div>
                </div>
                <div class="banner-content-right-attention">
                    <div class="banner-content-right-attention-top">
                        <p>关注我们</p>
                    </div>
                    <div class="banner-content-right-attention-bottom">
                        <div class="banner-content-right-attention-weixin">
                            <img src="images/weixi.png" alt="">
                        </div>
                        <div class="banner-content-right-attention-weibo">
                            <img src="images/weibo.png" alt="">
                        </div>
                        <div class="banner-content-right-attention-exam">
                            <img src="images/exam.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="banner-content-right-link">
                    <div class="banner-content-right-link-top">
                        <p>友情链接</p>
                    </div>
                    <div class="banner-content-right-link-bottom">
                        <a href="#">网易云课堂</a><br>
                        <a href="#">智慧高教</a><br>
                        <a href="#">有道考研</a><br>
                    </div>
                </div>
            </div>
            <div class="banner-content-bottom">
                <p> 网上有害信息举报（涉未成年人）：网站 https://www.12377.cn 电话 010-58581010 邮箱（涉未成年人）
                    youdao_jubao@rd.netease.combr</p>
                <p>粤B2-20090191-26 | 京ICP备12020869号-2 | 京公网安备44010602000207</p>
                <p>©2014-2023 icourse163.org</p>
                <p class="banner-content-bottom-img"><img src="images/police.png" alt=""><a href="#">
                        浙公网安备 33010802012594号</a></p>
            </div>
        </div>

        <!-- 侧边栏结束 -->

</body>

</html>